<script setup lang="ts">
import { getGuestDetails } from '@fl/api/order/first-trial'
import { useStoreDict } from '@fl/store/modules/goodHouseDict'
import { onMounted } from 'vue'

const props = defineProps({
    handleClose: {
        required: true,
        type: Function,
    },
    houseCustomId: {
        required: true,
        type: String,
    },
})

const dictStore = useStoreDict()
dictStore.init(['sys_user_sex', 'ky_nld', 'ky_qy', 'ky_hyzk', 'ky_jtjg', 'ky_sshy', 'ky_djxq', 'ky_gfyt', 'ky_qdlx'])
const { getDicts } = storeToRefs(dictStore)

const { houseCustomId } = toRefs(props)
const peopleDetailsForm = ref<any>({})
const dictLabel = computed(() => (value, arr) => {
    if (arr?.length > 0) {
        const obj = arr.find(d => d.value === value)
        return obj !== undefined ? obj.label : ''
    }
    else {
        return ''
    }
})
// 根据客源用户id查询详情
function getHouseCustomDetail() {
    getGuestDetails(houseCustomId.value).then((res) => {
        const formData = { ...res.data }
        for (const key in formData) {
            if (Object.hasOwnProperty.call(formData, key)) {
                const element = formData[key]
                if (element !== null && element !== '') {
                    if (key === 'age' || key === 'sex') {
                        formData[key] = element.toString()
                    }
                    if (key === 'sszk' || key === 'djxq' || key === 'gfyt') {
                        formData[key] = element.split(',')
                    }
                }
            }
        }
        peopleDetailsForm.value = formData
    })
}

onMounted(() => {
    getHouseCustomDetail()
})
</script>

<template>
    <el-container>
        <el-main>
            <el-descriptions :column="2"
                             border
            >
                <el-descriptions-item label="客户名称："
                                      :span="1"
                >
                    {{ peopleDetailsForm.xm }}
                </el-descriptions-item>

                <el-descriptions-item label="手机号："
                                      :span="1"
                >
                    {{ peopleDetailsForm.phone }}
                </el-descriptions-item>

                <el-descriptions-item label="身份证号："
                                      :span="1"
                >
                    {{ peopleDetailsForm.sfz }}
                </el-descriptions-item>

                <el-descriptions-item label="性别："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.sex, getDicts.sys_user_sex) }}
                </el-descriptions-item>

                <el-descriptions-item label="用户账号："
                                      :span="1"
                >
                    {{ peopleDetailsForm.userAccount }}
                </el-descriptions-item>

                <el-descriptions-item label="用户渠道："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.channelType, getDicts.ky_qdlx) }}
                </el-descriptions-item>

                <el-descriptions-item label="年龄段："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.age, getDicts.ky_nld) }}
                </el-descriptions-item>

                <el-descriptions-item label="婚姻状况："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.hyzk, getDicts.ky_hyzk) }}
                </el-descriptions-item>

                <el-descriptions-item label="家庭结构：">
                    {{ dictLabel(peopleDetailsForm.jtjg, getDicts.ky_jtjg) }}
                </el-descriptions-item>

                <el-descriptions-item label="置业次数：">
                    {{ peopleDetailsForm.zycs }}
                </el-descriptions-item>

                <el-descriptions-item label="居住地址："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.jzqy, getDicts.ky_qy) }}
                </el-descriptions-item>

                <el-descriptions-item label="工作地址："
                                      :span="1"
                >
                    {{ dictLabel(peopleDetailsForm.gzqy, getDicts.ky_qy) }}
                </el-descriptions-item>

                <el-descriptions-item label="所属行业："
                                      :span="2"
                >
                    <template v-for="(item, index) in peopleDetailsForm.sszk || []"
                              :key="index"
                    >
                        <el-tag type="info"
                                style="margin:2px"
                        >
                            {{ dictLabel(item, getDicts.ky_sshy) }}
                        </el-tag>
                    </template>
                </el-descriptions-item>

                <el-descriptions-item label="单价需求："
                                      :span="2"
                >
                    <template v-for="(item, index) in peopleDetailsForm.djxq || []"
                              :key="index"
                    >
                        <el-tag type="info"
                                style="margin:2px"
                        >
                            {{ dictLabel(item, getDicts.ky_djxq) }}
                        </el-tag>
                    </template>
                </el-descriptions-item>

                <el-descriptions-item label="购房用途："
                                      :span="2"
                >
                    <template v-for="(item, index) in peopleDetailsForm.gfyt || []"
                              :key="index"
                    >
                        <el-tag type="info"
                                style="margin:2px"
                        >
                            {{ dictLabel(item, getDicts.ky_gfyt) }}
                        </el-tag>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
        </el-main>
    </el-container>
</template>

<style scoped lang="scss">
:deep(.el-descriptions__label) {
    text-align: right !important;
}
</style>
